<template>
	<view class="u-text-center flex-column content-baisc-layout">
		<u-navbar :is-fixed="false" :titleSize="34" :border-bottom="false" title="公众号"
			:background="{
			background:'url(https://resource.lanbaozixun.com/uploads/images/20240620205458f58af9669.png) no-repeat',
			backgroundSize:'100%'
		}" title-color="#2F3033">
		</u-navbar>
		<view class="content-bg u-padding-top-40">
			<view class="u-margin-top-40 qr-code-item">
				<view class="u-padding-top-20 u-padding-bottom-20 bold white u-font-30">扫码关注公众号</view>
				<view class="qr-code-content u-padding-bottom-30 u-padding-top-40">
					<view class="qr-code-area">
						<image :src="serve_qr_code" mode="widthFix" class="qr-code" show-menu-by-longpress></image>
					</view>
					<view class="u-font-24 u-margin-top-30">蓝豹咨迅</view>
				</view>
			</view>
			<view class="u-margin-top-40 qr-code-item">
				<view class="u-padding-top-20 u-padding-bottom-20 bold white u-font-30">扫码关注订阅号</view>
				<view class="qr-code-content u-padding-bottom-30 u-padding-top-40">
					<view class="qr-code-area">
						<image :src="subscription_qr_code" mode="widthFix" class="qr-code" show-menu-by-longpress></image>
					</view>
					<view class="u-font-24 u-margin-top-30">蓝豹信息咨询</view>
				</view>
			</view>
			<view class="u-margin-top-40 qr-code-item">
				<view class="u-padding-top-20 u-padding-bottom-20 bold white u-font-30">扫码关注订阅号</view>
				<view class="qr-code-content u-padding-bottom-30 u-padding-top-40">
					<view class="qr-code-area">
						<image :src="subscription_qr_code_tow" mode="widthFix" class="qr-code" show-menu-by-longpress></image>
					</view>
					<view class="u-font-24 u-margin-top-30">跟着豹哥学知识</view>
				</view>
			</view>
			<view class="u-margin-top-40 qr-code-item">
				<view class="u-padding-top-20 u-padding-bottom-20 bold white u-font-30">扫码关注公众号</view>
				<view class="qr-code-content u-padding-bottom-30 u-padding-top-40">
					<view class="qr-code-area">
						<image src="https://resource.lanbaozixun.com/uploads/images/20250725204636a91ef4617.jpg" mode="widthFix" class="qr-code" show-menu-by-longpress></image>
					</view>
					<view class="u-font-24 u-margin-top-30">蓝豹获客开单宝</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		getWeixinConfig
	} from '@/api/app'
	import {
		mapGetters,
	} from "vuex";
	export default {
		data() {
			return {
				serve_qr_code:'',
				subscription_qr_code:'',
				subscription_qr_code_tow:'',
			};
		},
		onLoad() {
			var _this = this;
			getWeixinConfig().then(res => {
				if(res.code == 1){
					_this.serve_qr_code = res.data.serve_qr_code
					_this.subscription_qr_code = res.data.subscription_qr_code
					_this.subscription_qr_code_tow = res.data.subscription_qr_code_tow
				}
			})
			uni.$once('h5ShareSetFinished',function(w,o){
				o.shareTitle = '关注公众号';
				o.shareDesc = '关注公众号';
				w.share(o)
			})
		},
		onShareAppMessage() {
			const shareInfo = Cache.get("shareInfo");
			return {
				title: '关注公众号',
				path: "pages/official_accounts/official_accounts?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		onShareTimeline() {
			const shareInfo = Cache.get("shareInfo");
			return {
				title: '关注公众号',
				path: "pages/official_accounts/official_accounts?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		computed: {
			...mapGetters(["inviteCode"]),
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFF;
		min-height: 100vh;
		
		&::before{
			left: 0;
			right: 0;
			z-index: 1;
			height: 30%;
			content: ' ';
			position: absolute;
			background-image: url(https://resource.lanbaozixun.com/uploads/images/20240617141440943244509.png);
			background-size: 100%;
			background-repeat: no-repeat;
		}
		
		&::after{
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 0;
			content: ' ';
			position: absolute;
			background: linear-gradient(to bottom, rgba(176, 223, 255, 1) 35%, #FFF 40%) no-repeat;
		}
		
		.content-baisc-layout{
			z-index: 1;
			position: relative;
			min-height: 100vh;
		}
		
		.content-bg{
			border-radius: 20rpx 20rpx 0 0;
			background: linear-gradient(180deg, #D6EEFF 0%, #FFFFFF);
			border: 1px solid #FFFFFF;
			
			.qr-code-item{
				width: 90%;
				margin: 0 5%;
				overflow: hidden;
				border-radius: 30rpx;
				background: linear-gradient(180deg, #78B0FF 0%, #4CB6FE 100%);
				border: 2rpx solid #F0F4FF;
				
				.qr-code-content{
					border-radius: 30rpx 30rpx 0 0;
					background: #F0F4FF;
					
					.qr-code-area{
						width: 40%;
						padding: 0 8rpx;
						display: block;
						margin: 0 auto;
						background: white;
						border-radius: 10rpx;
						border: 2rpx solid #BFE6FF;
						
						.qr-code{
							width: 100%;
							height: 300rpx;
						}
					}
				}
			}
		}
	}
</style>
